<template>
    <div class="container">
        <div :class="['music', index % 2 ? 'music-red' : '']" @click="handleDel(list)" v-for="(list, index) in lists"
            :key="list.id"><img class="music-pic" :src="list.coverImgUrl" alt="">
            <span>播放量:{{ formatPlayCount(list.playCount) }}</span>
            <p>{{ list.name }}</p>
            <span>by {{ list.creator.nickname }}</span>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref, computed, onBeforeUnmount } from "vue"
import axios from "axios"
//绑定输入框数据
const keywords = ref("")
//定义歌单数据
const lists = ref([])

//定义删除函数
function handleDel(list) {
    lists.value.splice(lists.value.indexOf(list), 1)
}
//格式化播放量:播放量大于10万时,加万字
const formatPlayCount = computed(() => {
    return (num) => {
        if (num >= 100000) {
            return `${Math.floor(num / 100000)}万`
        } else {
            return num
        }
    }
})
const offset = ref(20)
function getOrderList() {
    axios.get(`http://122.112.161.135:3000/top/playlist?limit=20&offset=${offset.value}`).then((res) => {
        const { playlists } = res.data
        lists.value.push(...playlists)
    })
}
const handleScroll = () => {
    window.addEventListener("scroll", () => {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
        if (scrollTop + windowHeight + 1 > scrollHeight) {
            console.log('到底部了');
            offset.value += 20
            setTimeout(getOrderList(), 500)
        }
    })
}
//获取歌单数据
onMounted(() => {
    handleScroll()
    getOrderList()
})
onBeforeUnmount(() => {
    window.removeEventListener("scroll", () => { })
})
</script>
<style lang="stylus" scoped>
.container
  width 966px
  background #fff
  border-left:1px solid #c1c1c1
  border-right:1px solid #c1c1c1
  border-bottom:1px solid #c1c1c1
  padding:40px
  margin:0 auto 50px auto
  vertical-align:bottom
  display flex
  flex-wrap wrap
  justify-content:space-between
  color #333
  .music
    width 160px
    height 243px
    border 2px solid #44ac91
    margin-bottom 20px
    font-size 12px
    .music-pic
      width 100%
      height 160px
    p
      // 超出显示省略号
      white-space: nowrap;
      overflow:hidden
      text-overflow:ellipsis
      font-size 14px
      margin 5px
    span
      margin 5px
  .music-red
    border 2px solid #c20c0c
</style>